<script setup>
import {reactive, toRaw} from "vue";
import {ElMessage} from "element-plus";
import apis from "@/config/api-config.js";
import getResponse from "@assets/js/http-client.js";
import {validatePassword} from "@assets/js/form-data-validate.js";
import {useRouter} from "vue-router";

const router = useRouter();

const formData = reactive({
  oldPwd: '',
  newPwd: '',
  confirmPwd: ''
});
const handleModifyPassword = async () => {
  // 校验旧密码
  if (!formData.oldPwd) {
    ElMessage.warning('请输入旧密码');
    return;
  }
  // 校验新密码
  if (!validatePassword(formData.newPwd)) {
    ElMessage.error('新密码格式错误');
    return;
  }
  // 校验确认密码
  if (formData.newPwd !== formData.confirmPwd) {
    ElMessage.error('两次输入的新密码不一致');
    return;
  }
  let url = apis.member.modifyPassword.url;
  let type = apis.member.modifyPassword.type;
  let params = {...toRaw(formData)};
  let result = await getResponse(url, type, params);
  if (200 !== result.code) {
    ElMessage.error(result.message);
    return;
  }
  ElMessage.success('密码修改成功');
  // 清空密码输入框
  formData.oldPwd = '';
  formData.newPwd = '';
  formData.confirmPwd = '';
  //删除本地缓存中token
  localStorage.removeItem('wemall-token');
  ElMessage.success('密码修改成功，请重新登录');
  // 跳转到首页,并弹出登录页面
  await router.push({path: '/'})
}
</script>

<template>
  <div>
    <h1>修改密码</h1>
    <form id="resetPwdForm">
      <div class="form-group password-group">
        <input type="password" v-model="formData.oldPwd" placeholder="请输入旧密码">
      </div>
      <div class="form-group password-group">
        <input type="password" v-model="formData.newPwd"
               placeholder="新密码为8-20个非空白字符,包含大小写字母、数字和标点符号其中三种">
      </div>
      <div class="form-group password-group">
        <input type="password" v-model="formData.confirmPwd" placeholder="请再次输入新密码">
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-primary" @click="handleModifyPassword">保存修改</button>
        <button type="reset" class="btn btn-secondary">重置</button>
      </div>
    </form>
  </div>
</template>

<style scoped>
h1 {
  text-align: left;
  color: #333;
  margin-bottom: 2rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.form-group {
  margin-bottom: 1.5rem;
  position: relative; /* 新增：用于密码切换按钮定位 */
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

input[type="password"] {
  width: 80%;
  min-width: 480px;
  padding: 0.8rem 1.5rem 0.8rem 0.8rem; /* 右侧留空间给切换按钮 */
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

input[type="password"]:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.btn-group {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007BFF;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

</style>